<template>
  <a-drawer
    title=""
    placement="right"
    @close="onCloseLogs"
    width="400"
    :visible="logShow"
    :z-index="20000"
  >

  <div>
    <a-empty v-if="instLogs.length==0" />
    <a-comment v-for="insLog in instLogs" :key="insLog.id">
      <a slot="author">{{insLog.userName}}</a>
      <a-avatar
        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
        :alt="insLog.userName"
        slot="avatar"/>
      <p slot="content">
        {{insLog.opDescp}}
      </p>
      <a-tooltip slot="datetime" :title="insLog.createTime">
        <span>{{insLog.createTime}}</span>
      </a-tooltip>
    </a-comment>
  </div>
  </a-drawer>
</template>

<script>
    import BpmInstLogApi from "@/api/bpm/core/bpmInstLog";
    export default {
      name: "BpmInstLogs",
      props:{
          instId:{//流程实例Id
            type:String,
            required:true
          },
          logShow:{
              type:Boolean,
              default:false
          }
      },
      data(){
        return {
          instLogs:[]
        }
      },
      methods:{
          onCloseLogs(){
              this.$emit('update:logShow', false)
          }
      },
      watch:{
            logShow:function (val) {
                if(val){
                    BpmInstLogApi.getByInstId(this.instId).then(resp=>{
                        this.instLogs=resp.data;
                    });
                }
            }
        }
    }
</script>

<style scoped>

</style>